<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>物业管理系统</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    body{
        margin: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
    #playground{
        display: flex;
        height: calc(100% - 60px);
    }
    #app{
        width: 100%;
        border: none;
        box-sizing: border-box;
        box-shadow: 10px 10px 5px #888888;
    }
    #brand{
        font-size: larger;
        color: white;
        text-shadow: black 0.1em 0.1em 0.2em;
    }
</style>
<body>
<ul class="layui-nav">
    <li class="layui-nav-item">
        <h1 id="brand">物业管理系统</h1>
    </li>
    <li class="layui-nav-item" style="float: right;">
        <a href="javascript:openApp('用户管理/index.html');">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item" style="float: right;">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" style="float: right;">
        <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span id="name">我</span></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:exit();">退出</a></dd>
        </dl>
    </li>
</ul>
    <div id="playground">
        <ul class="layui-nav layui-nav-tree" lay-filter="leftSide">
            <li class="layui-nav-item">
                <a href="javascript:;">仪表数据管理</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:openApp('仪表数据管理/index.html');">水表</a>
                    </dd>
                    <dd>
                        <a href="javascript:openApp('仪表数据管理/index.html');">电表</a>
                    </dd>
                    <dd>
                        <a href="javascript:openApp('仪表数据管理/index.html');">天然气表</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:openApp('停车场管理/index.html');">停车场管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:openApp('物业收费管理/index.html');">物业收费</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:openApp('楼盘管理/index.html');">楼盘管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:openApp('住户管理/index.html');">住户管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:openApp('业主投诉/index.html');">业主投诉</a>
            </li>
        </ul>
        <iframe id="app"></iframe>
    </div>
</body>
<script src="/layui/layui.js"></script>
<script>
    var cookie = {
        set: function (key, val, time) {//设置cookie方法
            let date = new Date(); //获取当前时间
            let expiresDays = time;  //将date设置为n天以后的时间
            date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化为cookie识别的时间
            document.cookie = key + "=" + val + ";expires=" + date.toGMTString();  //设置cookie
        },
        get: function (key) {//获取cookie方法
            /*获取cookie参数*/
            let getCookie = document.cookie.replace(/[ ]/g, "");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
            let arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
            let tips;  //声明变量tips
            for (let i = 0; i < arrCookie.length; i++) {   //使用for循环查找cookie中的tips变量
                let arr = arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
                if (key === arr[0]) {  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
                    tips = arr[1];   //将cookie的值赋给变量tips
                    break;   //终止for循环遍历
                }
            }
            return tips;
        },
        delete: function (key) { //删除cookie方法
            let date = new Date(); //获取当前时间
            date.setTime(date.getTime() - 10000); //将date设置为过去的时间
            document.cookie = key + "=v; expires =" + date.toGMTString();//设置cookie
        }
    };

    var loginBox = {};
    let app = document.getElementById('app');
    layui.use('element', function () {
        let element = layui.element;

    });
    function openApp(href) {
        app.src = href;
    }
    layui.use('layer', function () {
        let layer = layui.layer;
        loginBox.close = layer.close;
        loginBox.window = layer.open({
            title: ''
            , skin: 'logBox'
            , type: 2
            , content: '/用户管理/login.html' //这里content是一个普通的String
            , area: ['400px', '380px']
            , resize: false
            , closeBtn: 0
        });
    });

    function setEnv(option) {
        if (option.name) document.getElementById('name').innerText = option.name;
    }

    function exit() {
        cookie.delete('name');
        cookie.delete('account');
        cookie.delete('passwd');
        window.location.href = '';
    }
</script>

</html>